<template>
   <div style="width: 100%;height: 100%;">
     <van-swipe class="my-swipe" style="height: 100%;" vertical @change="onChange" ref="swipe">
       <van-swipe-item style="width: 100%">
           <video-player class="video-player vjs-custom-skin" ref="videoPlayer" style="height: 100%;" :playsinline="true"
           :options="playerOptions" @pause="onPlayerPause"></video-player>
         <!-- <video :src="nowV.src" style="width: 100%;" controls ></video> -->
       </van-swipe-item>
       <van-swipe-item style="width: 100%">
         <!-- <video :src="nowV.src" style="width: 100%;" controls></video> -->
           <video-player class="video-player vjs-custom-skin" ref="videoPlayer" style="height: 100%;" :playsinline="true"
           :options="playerOptions" @pause="onPlayerPause"></video-player>
       </van-swipe-item>
       <van-swipe-item style="width: 100%">
         <!-- <video :src="nowV.src" style="width: 100%;" controls></video> -->
           <video-player class="video-player vjs-custom-skin" ref="videoPlayer" style="height: 100%;" :playsinline="true"
           :options="playerOptions" @pause="onPlayerPause"></video-player>
       </van-swipe-item>
     </van-swipe>
   </div>
 </template>
 <script>
 import Vue from "vue";
 import request from 'axios'
 import { Swipe, SwipeItem, Toast } from "vant";
 Vue.use(Swipe).use(SwipeItem);
 export default {
   name: "videoChild",
   methods: {
     onChange(index) {
       Toast('当前 Swipe 索引：' + index);
       console.log(index);
       console.log(this.$refs.swipe);
       if (index - this.lastItem === 1) {
         this.nowItem++
       }
       else if (this.lastItem - index === 1) {
         this.nowItem--
       }
       else if (index === 2) {
         this.nowItem--
       } else if (index === 0) {
         this.nowItem++
       }
       this.lastItem = index
       this.nowV = this.dataList[this.nowItem]
       this.playerOptions.sources[0].src = this.nowV.src
       console.log(this.playerOptions);
     },
     async getData() {
       const res = await request({
         url: 'https://bdb24c6d-8c19-4f80-8e7e-c9c9f037f131.bspapp.com/video',
         method: 'POST',
         data: {
           info: 'get_video'
         }
       })
       console.log(res);
       this.dataList = res.data.data
     },
     // 暂停(暂停时调用)(用户操作调用)
     onPlayerPause(player) {
       console.log('暂停', player)
       this.$emit('onPlayerPause', player)
     },
   },
   data() {
     return {
       dataList: [],
       firstItem: 0,
       secondItem: 1,
       thirdItem: 2,
       nowItem: 0,
       lastItem: 0,
       nowV: {},
       playerOptions: {
         live: true,
         playbackRates: [0.5, 1.0, 1.25, 1.5, 2.0], // 播放速度
         autoplay: true, //如果true,浏览器准备好时开始回放。
         controls: true, //控制条
         preload: "auto", //视频预加载
         muted: true, //默认情况下将会消除任何音频。
         loop: false, //导致视频一结束就重新开始。
         language: "zh-CN",
         aspectRatio: "375:667", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该								代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
         fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应						其容器。
         controlBar: {
           timeDivider: true,
           durationDisplay: true,
           remainingTimeDisplay: true,
           currentTimeDisplay: true, // 当前时间
           volumeControl: false, // 声音控制键
           playToggle: true, // 暂停和播放键
           progressControl: true, // 进度条
           fullscreenToggle: true, // 全屏按钮
         },
         sources: [
           {
             type: "video/mp4",
             src: "http://vfx.mtime.cn/Video/2019/03/18/mp4/190318214226685784.mp4",
           },
         ],
         poster: "../../assets/earth.png", //你的封面地址
         width: document.documentElement.clientWidth,
         notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时															显示的默认信息。
       },
 
 
     }
   },
   // computed:{
   //   Ratio:()=>  { return window.screen.width / window.screen.height}
   // },
   async created() {
     console.log(123);
     await this.getData()
     this.nowV = this.dataList[0]
     console.log(this.nowV.src,1111111111);
     this.playerOptions.sources[0].src = this.nowV.src
     // console.log('11', );
     this.playerOptions.aspectRatio = `${window.screen.width}:${window.screen.height}`
     // console.log(window.screen.width / window.screen.height);
   }
 };
 </script>
 <style>
 .my-swipe .van-swipe-item {
   text-align: center;
 }
 /* .video-js.vjs-user-active {
   height: 100%!important;
 } */
 </style>
  